<template>
  <div class="NavBar" v-if="navShow">
    <van-tabbar v-model="active" active-color="#004DB6" inactive-color="#666666">
      <van-tabbar-item class="center" route @click="switchNav(0)">
        <img class="tabicon" :src="menuData.home[getPicType(0)]" alt="home" />
        <span class="tabtxt">首页</span>
      </van-tabbar-item>
      <van-tabbar-item @click="switchNav(1)" :dot="mertisDot" class="merits">
        <img class="tabicon" :src="menuData.merits[getPicType(1)]" alt="home" />
        <span class="tabtxt">绩效榜</span>
      </van-tabbar-item>
      <van-tabbar-item @click="switchNav(2)" :badge="messageDot || ''" class="message">
        <img class="tabicon" :src="menuData.message[getPicType(2)]" alt="home" />
        <span class="tabtxt">消息</span>
      </van-tabbar-item>
      <van-tabbar-item @click="switchNav(3)">
        <img class="tabicon" :src="menuData.my[getPicType(3)]" alt="my" />
        <span class="tabtxt">我的</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import home from '../assets/images/home/home.png'
import homeActive from '../assets/images/home/home-active.png'
import performance from '../assets/images/home/performance.png'
import performanceActive from '../assets/images/home/performance-active.png'
import my from '../assets/images/home/my.png'
import myActive from '../assets/images/home/my-active.png'
import message from '../assets/images/home/message.png'
import messageActive from '../assets/images/home/message-active.png'
export default {
  name: 'MyTabBar',
  components: {},
  props: {},
  data() {
    return {
      active: 0,
      navShow: true,
      navShowArr: ['home', 'merits', 'message', 'my'], //展示底部导航页面数组
      menuData: {
        home: {
          routeArr: ['home'],
          normal: home,
          active: homeActive,
        },
        merits: {
          routeArr: ['merits'],
          normal: performance,
          active: performanceActive,
        },
        message: {
          routeArr: ['message'],
          normal: message,
          active: messageActive,
        },

        my: {
          routeArr: ['my'],
          normal: my,
          active: myActive,
        },
      },
      mertisDot: false,
      messageDot: 0,
    }
  },
  watch: {
    $route(to, from) {
      // 对路由变化作出响应
      this.tabbarActive()
    },
    messageNum: {
      handler(news) {
        this.messageDot = news
      },
    },
  },
  computed: {
    ...mapGetters(['messageNum']),
  },
  methods: {
    switchNav(to) {
      if (window.location.hash.indexOf(this.navShowArr[this.active]) !== -1) return
      switch (to) {
        case 0:
          this.$router.replace({ path: '/home' })
          break
        case 1:
          sessionStorage.removeItem('Honour')
          this.$router.replace({ path: '/merits' })
          break
        case 2:
          this.$router.replace({ path: '/message' })
          break
        case 3:
          this.$router.replace({ path: '/my' })
          break
      }
    },
    tabbarActive() {
      let hrefs = window.location.href.split('#/')[1]
      let href = hrefs.split('?')[0]
      if (this.navShowArr.indexOf(href) === -1) {
        this.navShow = false
      } else {
        this.navShow = true
        // this.dotWatch()
        let idx = Object.values(this.menuData).findIndex(itm => itm.routeArr.includes(href))
        this.active = idx === -1 ? 0 : idx
      }
    },
    getPicType(val) {
      return this.active === val ? 'active' : 'normal'
    },
    dotWatch() {
      setTimeout(() => {
        if (sessionStorage.getItem('Honour')) {
          this.mertisDot = true
        } else {
          this.mertisDot = false
        }
      }, 500)
    },
  },
  created() {},
  mounted() {
    this.tabbarActive()
  },
}
</script>
<style lang="scss" scoped>
.NavBar {
  box-shadow: -4px 0px 10px 0px rgba(0, 0, 0, 0.1);

  .van-tabbar {
    height: 52px;
    line-clamp: 25px;
    .van-tabbar-item {
      font-size: 14px;
      .van-tabbar-item__icon span {
        font-size: 12px;
      }
    }
    .van-tabbar-item--active {
      color: #9ea4ac;
    }
  }
  .merits,
  .message {
    position: relative;
    /deep/.van-tabbar-item__icon {
      position: static;
      .van-info {
        right: 32%;
        top: 6px;
        z-index: 9;
      }
    }
  }
  /deep/ .van-tabbar--fixed {
    position: absolute;
  }
  /deep/.van-icon-contact {
    font-size: 18px;
  }
  /deep/.center {
    text-align: center;
  }
  /deep/.tabicon {
    display: block;
    margin: 12px auto;
    width: 18px;
    height: 18px;
    position: relative;
    top: -2px;
  }
  /deep/.tabtxt {
    position: relative;
    top: -9px;
    font-size: 12px;
  }
  /deep/.van-info--dot {
    width: 9px;
    height: 9px;
  }
}
</style>
